<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="3">
          <el-button type="primary" size="medium" @click="openAddPage">发起考核</el-button>
        </el-col>
      </el-row>

      <el-table :data="attendanceItemData" style="width: 100%;">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="attendanceTime" label="考核月份" width="120"></el-table-column>
        <el-table-column prop="stutaStr" label="状态" width="140"></el-table-column>
        <el-table-column prop="name" label="备注" width="120"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.stutas==0"
              type="text"
              size="small"
              @click="openUpdatePage(scope.row.id)"
            >修改</el-button>
            <!-- 考核状态0 新建考核(可以修改),1填写月初计划 2.结束填写月初计划(必须所有人都填写完成月初计划才能结束) 3.发起考核状态 -->
            <el-button
              v-if="scope.row.stutas==0"
              type="text"
              size="small"
              @click="changeStatus(scope.row.id,1)"
            >提交月初计划</el-button>
            <el-button
              v-if="scope.row.stutas==1"
              type="text"
              size="small"
              @click="changeStatus(scope.row.id,2)"
            >结束填写月初计划</el-button>
            <el-button
              v-if="scope.row.stutas==2"
              type="text"
              size="small"
              @click="changeStatus(scope.row.id,3)"
            >发起考核</el-button>
            <el-button
              v-if="scope.row.stutas==1 || scope.row.stutas==3 "
              type="text"
              size="small"
              @click="showUndoPage(scope.row.id,scope.row.stutas)"
            >查看绩效填写状态</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="添加考勤" :visible.sync="dialogVisible" width="40%">
      <el-form
        ref="attendanceItemForm"
        :model="attendanceItemForm"
        :rules="attendanceItemFormRules"
        label-width="95px"
      >
        <el-form-item label="部门">
          <el-input v-model="this.deapertName" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="考核月份" prop="attendanceTime">
          <el-date-picker
            v-model="attendanceItemForm.attendanceTime"
            type="month"
            size="small"
            placeholder="选择月"
            value-format="yyyy-MM-dd"
            style="width:100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="name">
          <el-input v-model="attendanceItemForm.name" autosize size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="isdisabled" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="修改考勤" :visible.sync="dialogupdateVisible" width="40%">
      <el-form
        ref="attendanceItemupdateForm"
        :model="attendanceItemupdateForm"
        :rules="attendanceItemFormRules"
        label-width="95px"
      >
        <el-form-item label="部门">
          <el-input v-model="this.deapertName" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="考核月份" prop="attendanceTime">
          <el-date-picker
            v-model="attendanceItemupdateForm.attendanceTime"
            type="month"
            size="small"
            placeholder="选择月"
            value-format="yyyy-MM-dd"
            style="width:100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="name">
          <el-input v-model="attendanceItemupdateForm.name" autosize size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="isupdatedisabled" @click="updateItem()">提交</el-button>
          <el-button @click="resetUpdateForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="未提交列表" :visible.sync="uodoEmpVisible" width="40%">
      <el-table :data="uodoEmpData" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="empName" label="姓名"></el-table-column>
        <el-table-column prop="statusStr" label="绩效填写状态"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      departId: null,
      currentUid: null,
      deapertName: null,
      attendanceItemData: null,
      attendanceItemForm: {
        departId: null,
        attendanceTime: null,
        name: null
      },
      dialogVisible: false,
      isdisabled: false,
      isupdatedisabled: false,
      dialogupdateVisible: false,
      attendanceItemFormRules: {
        attendanceTime: [
          { required: true, message: "请选择考核月份", trigger: "blur" }
        ]
      },
      attendanceItemupdateForm: {
        departId: null,
        attendanceTime: null,
        name: null
      },
      uodoEmpVisible: false,
      uodoEmpData: null
    };
  },
  created: function() {
    this.getJsApiTeckit();
  },
  methods: {
    async getJsApiTeckit() {
      var result = await this.$httpd.get("/DingDingSecurity/GetJsapiTicket");
      if (result.status != 200) {
        this.$message.error("获取钉钉信息出错");
        return;
      }
      this.corpId = result.data.corpId;
      this.getCode(this.corpId);
      //获取当前的登录人
      this.getCurrentEmpCode(this.corpId);
    },
    getCurrentEmpCode(corpId) {
      var that = this;
      that.$dd.ready(() => {
        that.$dd.runtime.permission.requestAuthCode({
          corpId: corpId, // 企业id
          onSuccess: function(info) {
            that.GetCurrentEmp(info.code);
          }
        });
      });
    },
    async GetCurrentEmp(code) {
      var result = await this.$httpd.get(
        `/DingDingSecurity/GetuserInfo?code=${code}`
      );
      this.currentUid = result.data.userid;
    },
    //获取个人免登code
    getCode(corpId) {
      var that = this;
      that.$dd.ready(() => {
        that.$dd.runtime.permission.requestAuthCode({
          corpId: corpId, // 企业id
          onSuccess: function(info) {
            that.code = info.code;
            that.getDeparts(that.code);
          }
        });
      });
    },
    async getDeparts(code) {
      var result = await this.$httpd.get(
        `/EmpSalary/GetdepartmentById?code=${code}`
      );
      if (result.status != 200) {
        this.$message.error("获取部门数据出错");
        return;
      }
      this.departId = result.data.id;
      this.deapertName = result.data.name;
      //
      this.getAttendanceItems(this.departId);
    },
    async getAttendanceItems(departId) {
      var result = await this.$httpd.get(
        `/AttendanceItem/QueryAttendanceItems?dePartId=${departId}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.attendanceItemData = result.data.data;
    },
    openAddPage() {
      this.dialogVisible = true;
      this.isdisabled = false;
    },
    async submitForm() {
      this.$refs.attendanceItemForm.validate(async v => {
        if (v) {
          this.isdisabled = true;
          this.attendanceItemForm.departId = this.departId;
          var result = await this.$httpd.post(
            "/AttendanceItem/Add",
            this.attendanceItemForm
          );
          if (result.status != 200 || result.data.returnStatus == 0) {
            this.$message.error(result.data.message);
            return;
          }

          this.dialogVisible = false;

          this.getAttendanceItems(this.departId);
          this.resetForm();
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.attendanceItemForm.resetFields();
    },
    resetUpdateForm() {
      this.$refs.attendanceItemupdateForm.resetFields();
    },
    openUpdatePage(id) {
      this.isupdatedisabled = false;
      this.dialogupdateVisible = true;
      this.getAttendanceItemById(id);
    },
    async getAttendanceItemById(id) {
      var result = await this.$httpd.get(
        `/AttendanceItem/GetAttendanceItemById?id=${id}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.attendanceItemupdateForm = result.data.data;
    },
    async updateItem() {
      this.$refs.attendanceItemupdateForm.validate(async v => {
        if (v) {
          this.isupdatedisabled = true;
          var result = await this.$httpd.post(
            "/AttendanceItem/Update",
            this.attendanceItemupdateForm
          );
          if (result.status != 200 || result.data.returnStatus == 0) {
            this.$message.error(result.data.message);
            return;
          }
          this.getAttendanceItems(this.departId);
          this.dialogupdateVisible = false;
          this.$message.success({
            message: result.data.message,
            type: "success"
          });
        }
      });
    },
    async changeStatus(id, status) {
      var result = await this.$httpd.post("/AttendanceItem/UpdateStatus", {
        id: id,
        status: status,
        userId: this.currentUid
      });
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.$message.success({
        message: result.data.message,
        type: "success"
      });
      this.getAttendanceItems(this.departId);
    },
    //展示未填写人员
    async showUndoPage(id, itemStatus) {
      this.uodoEmpVisible = true;
      var result = await this.$httpd.get(
        `AttendanceEmp/GetAttendanceEmpListOfUndoByItemIdAndStatus?itemId=${id}&status=${itemStatus}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.uodoEmpData = result.data.data;
    }
  }
};
</script>
<style scoped>
</style>